<template>
  <div class="count-down">
    <slot v-bind="currentTime">
      <span>{{ currentTime.format }}</span>
    </slot>
  </div>
</template>

<script setup lang="ts">
// 模块引入
import { onMounted } from 'vue'
import useCountdown from './useCountdown'

interface IProps {
  /** 倒计时时长，类型number */
  time?: number
  /** 倒计时显示格式，'mm:ss' */
  format?: string
  /** 是否组件挂载立即执行 */
  immediate?: boolean
}

defineOptions({
  // 组件名称
  name: 'CountdownComp',
  // 继承透传，是否继承没在子组件声明的父组件的属性
  inheritAttrs: true
})

const props = withDefaults(defineProps<IProps>(), {
  time: 0,
  format: 'HH:mm:ss',
  immediate: false
})

const { start, currentTime } = useCountdown({
  ...props,
  onFinish: () => emits('finishHandle')
})

const emits = defineEmits(['finishHandle'])

onMounted(() => {
  if (props.immediate) {
    start()
  }
})

defineExpose({
  start,
  currentTime
})
</script>

<style scoped lang="scss"></style>
